<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>layui-demo</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<div>
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<div class="demoTable">
					用户编号：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off">
					</div>
					<div class="layui-inline">
	    			 	<label class="layui-form-label">日期范围</label>
	     			 	<div class="layui-input-inline">
	      			 		 <input type="text" class="layui-input" id="test6" autocomplete=“off”>
	     			 	</div>
	     			 	<input type = "hidden" id = "startTime" >
	     			 	<input type = "hidden" id = "endTime" >
     			 	</div>
					
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
	</div>


	<script src="layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	
	<script type="text/javascript">
		layui.use('laydate', function(){
			  var laydate = layui.laydate;
			  //日期范围
			  laydate.render({
			    elem: '#test6'
			    ,range: true
			    ,done: function(value, date, endDate){

			  		if(value!=null){
			  		var startTime= date.year+"-"+date.month+"-"+date.date;
			  		$("#startTime").val(startTime);
			  		var endTime= endDate.year+"-"+endDate.month+"-"+endDate.date;
			  		$("#endTime").val(endTime);
			  	}
			  }
			});
		});
	</script>

	<script>
		layui.use('table', function() {
			var table = layui.table;
			table.render({
				elem : '#test',
				url : 'slbu', //地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '日志表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'logid',
					title : '日志编号',
					width : 160,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'logop',
					title : '操作方式',
					width : 160
				}, {
					field : 'logobject',
					title : '操作对象',
					width : 160

				}, {
					field : 'userid',
					title : '用户编号',
					width : 160,
					templet : '<div>{{d.users.userid}}</div>'
				}, {
					field : 'username',
					title : '用户名',
					width : 220,
					templet : '<div>{{d.users.username}}</div>'
				}, {
					field : 'logip',
					title : 'IP地址',
					width : 200,

				}, {
					field : 'logtime',
					title : '日志时间',
					width : 220,
					templet : '<div>{{ layui.util.toDateString(d.logtime, "yyyy-MM-dd HH:mm:ss") }}</div>',
					sort : true

				}, {
					field : 'remark',
					title : '备注信息',
					width : 328,

				} ] ],
				page : true,
				id : 'testReload'
			});

			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');
					var start = $('#startTime').val();
					var end = $('#endTime').val();
					
					console.log(start);
					console.log(end);

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : { //检索的条件

							userid : demoReload.val(),
							startTime : start,
							endTime : end

						}
					});
					console.log(startTime);
					console.log(endTime);
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

		});
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>
	
	

</body>
</html>
